<template>
  <view class="page">
    <z-paging ref="paging" v-model="goodsList" @query="queryList">
      <template #top>
        <custom-navbar title="搜索" :leftIconSize="0"></custom-navbar>
        <view class="padding-lr-default search-box mb20">
          <up-search
            placeholder="寻找宝贝"
            :clearabled="true"
            :actionText="false"
            v-model="searchValue"
          ></up-search>
        </view>
      </template>
      <template #refresher="{ refresherStatus }">
        <custom-refresher :status="refresherStatus" />
      </template>
      <template #loadingMoreNoMore>
        <custom-nomore />
      </template>
      <view class="padding-lr-default">
        <!-- 商品区域 -->
        <goods-list-item :goodsList="goodsList"></goods-list-item>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsListApi } from "@/api/index.js";
const searchValue = ref("");
const goodsList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
  const params = {
    currentPage: pageNo,
    pageSize: pageSize,
    searchKey: searchValue.value,
  };
  goodsListApi(params)
    .then((res) => {
      paging.value.complete(res.records);
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
onLoad((options) => {
  searchValue.value = options.searchValue;
});
</script>

<style lang="scss" scoped>
.search-box {
  .u-search {
    flex: initial;
  }
}
</style>
